<template>
<div class="talk">
    <button @click="talk">获取情话</button>
    <ul>
        <li v-for=" item in list" :key="item.id">{{item.title}}</li>
    </ul>
    <button @click="loveStore.removeLove(1)">删除</button>
</div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {useLoveStore} from '@/store/love'
import { storeToRefs } from 'pinia'

const loveStore = useLoveStore()

const {list} = storeToRefs(loveStore)

function talk(){
    loveStore.addLove({
        id:3,
        title:'大聪明',
        content:'world' 
    })
}
// loveStore 订阅
// mutation 是一个对象，包含了 mutation 的类型和参数
// mutation 是 本次修改的内容
// state 是一个对象，包含了当前的状态
// state 是 本次修改后的数据
loveStore.$subscribe((mutation,state)=>{
    localStorage.setItem('loveList',JSON.stringify(state.list))
})
</script>

<style scoped>
.talk{
  margin-top: 20px;
  background-color: rgb(44, 99, 148);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>